<template>
	<div class="app-container">

		<van-sticky :offset-top="0">
			<van-nav-bar left-arrow v-if="$route.meta.navBar" @click-left="onClickLeft" @click-right="onClickRight">
				<template #right>
					<van-icon name="search" size="18" @click="go" />
				</template>
				<template #title>
					{{$route.meta.title}}
				</template>
			</van-nav-bar>
		</van-sticky>

		<div class="layout-content">
			<!-- <transition name="van-slide-left"></transition> -->
			<keep-alive v-if="$route.meta.keepAlive">
				<router-view></router-view>
			</keep-alive>
			<router-view v-else></router-view>

		</div>

		<div class="layout-footer" v-if="$route.meta.tabBar">
			<TabBar :data="tabbars" @change="handleChange" />
		</div>
	</div>
</template>

<script>
import TabBar from '@/components/TabBar'
export default {
  name: 'AppLayout',
  data() {
    return {
      tabbars: [{
        title: '首页',
        to: {
          name: 'Home'
        },
        icon: 'home-o'
      },
      {
        title: '分类',
        to: {
          name: 'ProductClassify'
        },
        icon: 'apps-o'
      },

      {
        title: '购物车',
        to: {
          name: 'Cart'
        },
        icon: 'shopping-cart-o'
      },
      {
        title: '个人中心',
        to: {
          name: 'User'
        },
        icon: 'user-o'
      }
      ]
    }
  },
  created() {},
  components: {
    TabBar
  },
  methods: {
    go() {
      this.$router.push('/search')
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {

    },
    handleChange(v) {}
  }
}
</script>
<style lang="scss">

</style>
